<template>
  <div class="my-certificate-apply">
    <Crumbs title="开发者认证新增" />
    <div class="main">
      <div class="title-info">工单详情</div>
      <el-row>
        <el-form :inline="true" :model="application" size="small" :rules="applicationroles" ref="applicationref">
          <el-form-item label="工单类型" prop="orderType">
            <el-select v-model="application.orderType" placeholder="工单类型">
              <el-option label="开发者认证" value="6"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="工单描述" prop="orderDesc">
            <el-input v-model="application.orderDesc" placeholder="工单描述"></el-input>
          </el-form-item>
          <el-form-item label="优先级" prop="priority">
            <el-select v-model="application.priority" placeholder="优先级">
              <el-option label="紧急" value="0"></el-option>
              <el-option label="高" value="1"></el-option>
              <el-option label="中" value="2"></el-option>
              <el-option label="低" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="截止日期" prop="endDate">
            <el-date-picker v-model="application.endDate" type="date" value-format="yyyy-MM-dd" placeholder="选择时间" :picker-options="expireTimeOption" />
          </el-form-item>
        </el-form>
      </el-row>
      <div class="title-info">开发者认证材料列表</div>
      <div>
        <el-button type="primary" size="small" @click="batchdelete">批量删除</el-button>
        <el-button type="primary" size="small" @click="downloadTemplate">认证模板下载</el-button>
      </div>
      <el-row>
        <el-table :data="fileInfoList" ref="tableref">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="docName" label="资料名称" />
          <el-table-column prop="required" label="是否必传"> </el-table-column>
          <el-table-column prop="fileSize" label="资料大小"> </el-table-column>
          <el-table-column prop="fileDesc" label="资料描述" />
          <el-table-column label="备注" prop="remark"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="uploadbtn(scope.row, scope.$index)">上传文件</el-button>
              <el-button type="text" @click="deleteupload(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <br />
      <el-row type="flex" justify="center">
        <el-button size="small" @click="$router.push('/devWorkOrderManagement')">取 消</el-button>
        <el-button size="small" type="primary" @click="submit">确定</el-button>
      </el-row>
    </div>
    <!-- 上传文件的dialog -->
    <div>
      <el-dialog title="资料上传" :visible.sync="uploaddialogVisible" width="30%" @close="resetForm('uploadref')">
        <el-form ref="uploadref" :model="uploadform" label-width="80px" :rules="uploadRules">
          <el-form-item label="资料名称" prop="docName">
            <el-input v-model="uploadform.docName" disabled></el-input>
          </el-form-item>
          <el-form-item label="资料描述" prop="fileDesc">
            <el-input v-model="uploadform.fileDesc" placeholder="输入资料描述"></el-input>
          </el-form-item>
          <el-row>
            <el-col :span="19">
              <el-form-item label="上传文件" prop="newName">
                <el-input v-model="uploadform.newName" placeholder="" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label-width="0" prop="filePath">
                <el-upload v-model="uploadform.filePath" class="upload-demo" action="/api/file/info/addWork" multiple :show-file-list="false" :on-success="uploadsuccess" :on-error="uploadError">
                  <el-button size="" type="primary">选择</el-button>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="uploadform.remark" placeholder="输入备注"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button
            @click="
              indexid = ''
              uploaddialogVisible = false
            "
            >取 消</el-button
          >
          <el-button type="primary" @click="uploadsub">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 上传文件的校验
      uploadRules: {
        fileDesc: [
          { max: 200, message: '长度在200字符以内', trigger: 'change' }
        ],
        remark: [
          { max: 200, message: '长度在200字符以内', trigger: 'change' }
        ],
      },
      //设置失效日期今天之前的日期不可选
      expireTimeOption: {
        disabledDate (date) {
          //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
          return date.getTime() < Date.now() - 24 * 60 * 60 * 1000;
        },
      },
      indexid: '',
      uploadform: {
        docName: '',
        fileDesc: '',
        remark: '',
        newName: '',
        filePath: '',
        fileSize: ''
      },
      uploaddialogVisible: false,
      applicationroles: {
        orderType: [{
          required: true,
          message: '请选择工单类型',
          trigger: 'change'
        },],
        orderDesc: [{
          required: true,
          message: '请输入工单描述',
          trigger: 'change'
        },{ max: 200, message: '长度在 200个字符内', trigger: 'change' }
        ],
        priority: [{
          required: true,
          message: '请选择优先级',
          trigger: 'change'
        },],
        endDate: [{
          required: true,
          message: '请选择截止日期',
          trigger: 'change'
        },]
      },
      application: {
        orderType: '',
        orderDesc: '',
        priority: '',
        endDate: '',
        newName: ''
      },
      fileInfoList: [],
    }
  },
  created () {
    this.gettabledata()
  },
  methods: {

    //  下载模板
    downloadTemplate () {
      this.$util.download('/api/file/info/downloadApprove')
    },
    deleteupload (index) {
      // 
      this.$confirm('确认删除该模板的数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        this.fileInfoList[index].fileDesc = ''
        this.fileInfoList[index].fileSize = ''
        this.fileInfoList[index].remark = ''
        this.fileInfoList[index].filePath = ''
        this.fileInfoList[index].newName = ''
      })
    },
    gettabledata () {
      this.$http({
        url: '/api/file/info/listApprove',
        method: 'post',
        data: {}
      }).then(res => {
        res.data.rows.forEach(item => {
          for (let key in item) {
            if (key != 'docName' && key != 'required' && key != 'fileId') {
              item[key] = ''
            }
            if (key == 'fileSize') {
              item[key] = 0
            }
          }
        })
        this.fileInfoList = res.data.rows
        console.log(this.fileInfoList)
      })
    },
    submit () {
      // 提交新增
      // 校验
      console.log(this.fileInfoList)
      this.$refs['applicationref'].validate((valid) => {
        if (valid) {
          // 创建人
          // 判断必穿是否上传
          try {
            this.fileInfoList.forEach(item => {
              if (item.required == '是' && item.filePath == '') {
                throw new Error("1")
              }
              delete item.fileId
              delete item.params
            })
          } catch (e) {
            this.$message({
              message: '请上传所有必须资料！',
              type: 'warning',
            })
            return
          }
          this.application.fileInfoList = this.fileInfoList
          console.log(this.application)
          this.$http({
            url: '/api/work/order/fileinfo/',
            method: 'post',
            data: this.application
          }).then(res => {
            console.log(res, '20p2p2p')
            if (res.data.code == 200) {
              // 
              this.$message.success('工单提交成功!')
              this.$router.push('/devWorkOrderManagement')
            } else {
              this.$message.error('工单提交失败!')
            }

          }).catch(err => {
            this.$message.error('工单提交失败!')
          })
        }
      })

    },
    uploadbtn (data, index) {
      console.log(data)
      this.uploaddialogVisible = true
      this.indexid = index
      this.uploadform.docName = data.docName
      this.uploadform.fileDesc = data.fileDesc
      this.uploadform.remark = data.remark
      this.uploadform.newName = data.newName
      this.uploadform.filePath = data.filePath
    },
    // 上传文件的确定按钮的函数
    uploadsub () {
      // 校验
      this.$refs['uploadref'].validate((valid) => {
        if (valid) {
          this.uploaddialogVisible = false
          this.fileInfoList[this.indexid].fileDesc = this.uploadform.fileDesc
          this.fileInfoList[this.indexid].remark = this.uploadform.remark
          if (this.uploadform.newName) {
            this.fileInfoList[this.indexid].fileSize = this.uploadform.fileSize + 'M'
          }
          this.fileInfoList[this.indexid].newName = this.uploadform.newName
          this.fileInfoList[this.indexid].filePath = this.uploadform.filePath
        }
      });

    },
    resetForm (form) {
      this.$refs[form].resetFields()
    },
    uploadError (err, file, fileList) {
      this.$message.error('文件上传失败！')
    },
    uploadsuccess (response, file, fileList) {
      // 判断文件名字和模板名字是否一样
      console.log(file)
      file.name = file['name'].substring(0, file['name'].lastIndexOf("."));
      if (file.name == this.uploadform.docName) {
        this.uploadform.newName = file.name
        this.uploadform.filePath = file.response.path
        // 文件大小
        this.uploadform.fileSize = (file.size / 1024 / 1024).toFixed(2)
        this.$message.success('上传文件成功！')
      } else {
        this.$message({
          type: "warning",
          message: '上传文件名称应与资料名称相同'
        })
      }

    },
    batchdelete () {
      console.log(this.$refs.tableref.selection)
      this.$confirm('确认删除选择模板的数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        this.$refs.tableref.selection.forEach(item => {
          this.fileInfoList.forEach(ele => {
            if (item.fileId == ele.fileId) {
              ele.fileDesc = ''
              ele.fileSize = ''
              ele.remark = ''
              ele.filePath = ''
              ele.newName = ''
            }
          })
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.my-certificate-apply {
  height: calc(100vh - 100px);
  background-color: #f8f8f8;
  padding: 5px 30px 10px;

  .main {
    height: 92%;
    background-color: white;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 10px 20px;

    .title-info {
      position: relative;
      margin: 10px 0 15px;

      &::before {
        position: absolute;
        content: '';
        display: block;
        width: 3px;
        height: 90%;
        background-color: #55aaff;
        left: -8px;
        top: 6%;
      }
    }

    .application-status {
      display: flex;
      height: 100%;
      align-items: center;
      justify-content: center;
    }
  }
}

span.success {
  color: #67c23a;
}
</style>
